<form nz-form class="ant-advanced-search-form" [formGroup]="searchFormGroup">
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="6" *ngFor="let searchItem of searchForm" [hidden]="!searchItem.show">
      <nz-form-item>
        <nz-form-label [nzFor]="searchItem.placeholder">{{searchItem.placeholder}}</nz-form-label>
        <nz-form-control>
          <label>
            <input nz-input [placeholder]="searchItem.placeholder" [formControlName]="searchItem.name"
              [(ngModel)]="searchItem.value" />
          </label>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <div nz-row>
    <div nz-col [nzSpan]="24" class="search-area">
      <button nz-button nzType="primary" (click)="searchData()">Search</button>
      <button nz-button (click)="resetForm()">Clear</button>
    </div>
  </div>
</form>
<!--
分页：使用 [nzFrontPagination]="false" 指定由服务端分页。
排序：使用 [nzSortFn]="true" 指定由服务端排序，如果需要多列排序可使用 [nzSortPriority]="true"。
筛选：使用 [nzFilters] 来指定筛选项，使用 [nzFilterFn]="true" 指定由服务端筛选
参数传输：通过 (nzQueryParams) 服务端需要的参数，数据结构为
 -->
<nz-table nzShowSizeChanger nzSize="small" [nzFrontPagination]="false" nzBordered [nzData]="userList"
  [nzLoading]="loading" [nzTotal]="total" [(nzPageSize)]="query.limit" [(nzPageIndex)]="query.page"
  (nzQueryParams)="loadData()">
  <thead>
    <tr>
      <th *ngFor="let data of tableData" nzColumnKey="data.name">{{data.title}}</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of userList">
      <td *ngFor="let data of tableData">{{ user[data.name] }}</td>
      <td>
        <button nz-button nzType="primary" (click)="showDetail(user.id)">详情</button>
        <button nz-button nzType="primary" (click)="edit(user.id)">编辑</button>
      </td>
    </tr>
  </tbody>
</nz-table>